<template>
    <div class="i-table-no-border">
        <Form ref="form" :model="createData" onsubmit="return false;">
            <Row :gutter="24" type="flex">
                <Col v-bind="grid">
                <FormItem prop="keywords">
                    <Input @on-enter="handleSubmits(0)" @on-clear="handleSubmits(0)" v-model="createData.keywords" clearable
                        placeholder="请输入患者姓名/手机号/诊疗号" />
                </FormItem>
                </Col>
                <Col v-bind="grid">
                <FormItem prop="clinic_id">
                    <Select v-model="createData.clinic_id" placeholder="诊室" :clearable="true" @on-change="getDatas()">
                        <Option v-for="item in condition.clinic_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">
                            {{ item.name }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid" v-if="createData.clinic_id">
                <FormItem prop="belong_assistant_id">
                    <Select v-model="createData.belong_assistant_id" placeholder="所属医助" :clearable="true" @on-change="getDatas()">
                        <Option v-if="+item.clinic_id === +createData.clinic_id" v-for="item in condition.member_medical_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">
                            {{ item.name }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid">
                <FormItem prop="outpatient_type_id">
                    <Select v-model="createData.outpatient_type_id" placeholder="就诊类型" :clearable="true" @on-change="getDatas()">
                        <Option v-for="item in condition.outpatient_type_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">
                            {{ item.name }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid">
                <FormItem prop="effect_type_id">
                    <Select v-model="createData.effect_type_id" placeholder="效果类型" :clearable="true" @on-change="getDatas()">
                        <Option v-for="item in condition.effect_type_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">
                            {{ item.name }}</Option>
                    </Select>
                </FormItem>
                </Col>
                <Col v-bind="grid">
                <FormItem prop="risk_type_id">
                    <Select v-model="createData.risk_type_id" placeholder="风控类型" :clearable="true" @on-change="getDatas()">
                        <Option v-for="item in condition.risk_type_list" :key="item.id" :value="item.id" :disabled="+item.status === 0">{{ item.name }}
                        </Option>
                    </Select>
                </FormItem>
                </Col>

                <!-- <Col v-bind="grid" class="ivu-text-right">
                <Button type="primary" @click="handleSubmit(0)">查询</Button>
                <Button class="ivu-ml-8" @click="handleSubmit(1)">重置</Button>
                </Col> -->
            </Row>
        </Form>
        <Table size="small" ref="table" :columns="columns" :data="data" :loading="loading"
            @on-sort-change="handleChangeSort">
            <template slot-scope="{ row }" slot="info">
                <a href="javaScript:;" @click="handleDetailPatient(row)">{{ row.name }} , {{ row.age }} ,
                    {{ row.gender_str }}</a>
            </template>
            <template slot-scope="{ row }" slot="input">
                <div class="editInput" @click="editInput($event, row)">
                    {{row.anti_relapse_year}}
                </div>
                <!--<Input v-model="row.anti_relapse_year"  :key="row.id" @on-blur="setAntiyears(row)" type="number"/>-->
            </template>
            <template slot-scope="{ row }" slot="diagnosis">
                <Tag v-if="row.outpatient_name" color="blue">{{ row.outpatient_name }}</Tag>
            </template>
            <template slot-scope="{ row }" slot="next_revisiting_time_str">
                <div v-if="!row.show" class="DatePicker " @click="aaa" @dblclick="DatePicker (row)">
                    {{row.next_revisiting_time_str === '' ? '&#12288' : row.next_revisiting_time_str}}
                </div>
                <DatePicker :transfer="true" v-if="row.show" v-model="next_revisiting_time_strs" placement="bottom"
                    :options="options3" confirm type="date" placeholder="请选择下次复诊时间" style="width: 80px"
                    @on-ok="confirm(row)" @on-clear="OnClear(row)"></DatePicker>
            </template>
            <template slot-scope="{ row }" slot="label">
                <Poptip word-wrap trigger="hover" placement="right" width="400">
                    <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index" v-if="index < 3">{{ item }}
                    </Tag>
                    <div slot="content">
                        <Tag v-for="(item, index) in row.patient_tags_name_arr" :key="index">{{ item }}</Tag>
                    </div>
                </Poptip>
            </template>
            <template slot-scope="{ row }" slot="patient_card_id">
                <span v-if="row.patient_card_id">
                    <span v-if="row.patient_card_id.length < 15">
                        {{row.patient_card_id}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                        :content="row.remark">
                        {{row.patient_card_id.substring(0, 15)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="belong_member_name">
                <span v-if="row.belong_member_name">
                    <span v-if="row.belong_member_name.length < 4">
                        {{row.belong_member_name}}
                    </span>
                    <Poptip v-else word-wrap transfer trigger="hover" placement="bottom" width="200"
                        :content="row.remark">
                        {{row.belong_member_name.substring(0, 4)}}…
                    </Poptip>
                </span>
                <span v-else>无</span>
            </template>
            <template slot-scope="{ row }" slot="channel">
                <Badge status="success" :text="row.source_name" />
            </template>
            <template slot-scope="{ row, index }" slot="action">
                <a @click="handleOpenDrawer(row.id)">编辑</a>
                <Divider type="vertical" />
                <a @click="handleOpenSubmit(row)">回访</a>
            </template>
            <template slot-scope="{ row }" slot="remark">
                <Tooltip :content="row.remark" :delay="500" placement="left" theme="light" max-width="500"
                    :word-wrap="true" :transfer="true">
                    <span
                        style="font-size: 12px">{{  row.remark && row.remark.length > 14 ? row.remark.slice(0, 14) +  '...' : row.remark }}</span>
                </Tooltip>
            </template>
        </Table>
        <div class="ivu-mt ivu-text-center">
            <Page :total="total" :current.sync="realData.page" show-total show-elevator :page-size="realData.pageSize"
                @on-change="handleChangePage" :page-size-opts="pageOpts" show-sizer transfer
                @on-page-size-change="handleChangePageSize" />
        </div>
        <edit-patient ref="editPatient" @ok="getData" />
        <table-model ref="editModel" @close="closeEdit" />
        <Drawer :closable="false" v-model="showTetailDrawer" width="1000" class="edtailDrawers"  >
            <detailDrawer :editType="edit_type" v-if="patientId&&showTetailDrawer" :patientId="patientId"></detailDrawer>
        </Drawer>
    </div>
</template>
<script>
    import { AntirelapseList, setAntiyear, updateNextRevisitingTime } from '@/api/patient'
    import tableModel from '@/components/visitModel/table-model';
    import EditPatient from '../../patient/patient-list/modules/editPatient'
    import detailDrawer from '../../patient/patient-detail/index.vue'
    import { mapActions } from 'vuex';
    import dayjs from 'dayjs'
    export default {
        components: {
            EditPatient,
            tableModel,
            detailDrawer
        },
        data () {
            return {
                patientId: null,
                edit_type: 2,
                showTetailDrawer: false,
                clinic_list:[],
                createData: {
                    start_time: [],
                    end_time: '',
                    keywords: '',
                    clinic_id:'',
                    belong_assistant_id: '',
                    outpatient_type_id: '',
                    effect_type_id: '',
                    risk_type_id: '',
                    clinic_assess_id: '',
                    body_parts_ids: [],
                    tags_ids: [],
                    sort_last_revisiting_type: 0,
                    sort_next_revisiting_type: 0,
                    sort_last_callback_type: 0,
                    sort_next_callback_type: 0,
                    sort_revisiting_type: 0,
                    sort_callback_type: 0,
                    sort_missed_type: 0,
                    page: 1,
                    pageSize: 10
                },
                realData: {
                    start_time: [],
                    end_time: '',
                    keywords: '',
                    clinic_id:'',
                    belong_assistant_id: '',
                    outpatient_type_id: '',
                    effect_type_id: '',
                    risk_type_id: '',
                    clinic_assess_id: '',
                    body_parts_ids: [],
                    tags_ids: [],
                    sort_last_revisiting_type: 0,
                    sort_next_revisiting_type: 0,
                    sort_last_callback_type: 0,
                    sort_next_callback_type: 0,
                    sort_revisiting_type: 0,
                    sort_callback_type: 0,
                    sort_missed_type: 0,
                    sort_anti_type: 0,
                    page: 1,
                    pageSize: 10
                },
                baseInfo: {
                    body_parts_list: [],
                    tags_list: [],
                    member_list: [],
                    effect_type_list: [],
                    risk_type_list: [],
                    clinic_assess_list: [],
                    outpatient_type_list: []
                },
                total: 0,
                pageOpts: [10, 20, 30, 50],
                grid: {
                    xl: 4,
                    lg: 8,
                    md: 12,
                    sm: 24,
                    xs: 24
                },
                loading: false,
                columns: [
                    {
                        title: '基本信息',
                        slot: 'info',
                        minWidth: 130,
                        fixed: 'left'
                    },
                    {
                        title: '归属人',
                        key: 'belong_member_name',
                        slot: 'belong_member_name',
                        minWidth: 120
                    },
                    {
                        title: '抗复发年限',
                        key: 'anti_relapse_year',
                        sortable: 'custom',
                        slot: 'input',
                        minWidth: 115
                    },
                    {
                        title: '诊疗号',
                        key: 'patient_card_id',
                        slot: 'patient_card_id',
                        minWidth: 120
                    },
                    {
                        title: '诊室',
                        key: 'clinic_name',
                        minWidth: 80
                    },
                    {
                        title: '上次到诊',
                        key: 'last_revisiting_time_str',
                        sortable: true,
                        minWidth: 110
                    },
                    {
                        title: '下次复诊',
                        key: 'next_revisiting_time_str',
                        sortable: true,
                        slot: 'next_revisiting_time_str',
                        minWidth: 110
                    },
                    {
                        title: '上次回访时间',
                        key: 'last_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '下次回访时间',
                        key: 'next_callback_time_str',
                        sortable: true,
                        minWidth: 150
                    },
                    {
                        title: '就诊类型',
                        slot: 'diagnosis',
                        minWidth: 100
                    },
                    {
                        title: '患者标签',
                        slot: 'label',
                        minWidth: 100
                    },
                    {
                        title: '复诊次数',
                        key: 'revisiting_count',
                        sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '未到诊天数',
                        key: 'missed_days',
                        sortable: true,
                        sortable: 'custom',
                        minWidth: 120
                    },
                    {
                        title: '回访次数',
                        key: 'callback_count',
                        sortable: true,
                        sortable: 'custom',
                        minWidth: 110
                    },
                    {
                        title: '地区',
                        key: 'city_name',
                        minWidth: 100
                    },
                    {
                        title: '来源',
                        minWidth: 120,
                        slot: 'channel'
                    },
                    {
                        title: '备注',
                        minWidth: 120,
                        slot: 'remark'
                    },
                    {
                        title: '操作',
                        minWidth: 110,
                        slot: 'action',
                        fixed: 'right'
                    }
                ],
                data: [],
                typeList: [],
                labelList: [],
                docList: [],
                docElement: '',
                condition: [],
                options3: {
                    disabledDate (date) {
                        return date && date.valueOf() < Date.now() - 86400000;
                    }
                },
                row: {
                    show: false
                },
                next_revisiting_time_strs: ''
            }
        },
        created () {
            let jumpPage = window.localStorage.getItem('jumpDetail')
            if (jumpPage) {
                let parsePage = JSON.parse(jumpPage)
                this.realData.belong_assistant_id = parsePage.belong.toString()
                this.createData.belong_assistant_id = parsePage.belong.toString()
            }
            this.getData()
        },
        destroyed () {
            window.localStorage.removeItem('jumpDetail')
        },
        methods: {
            closeDrawer(){
                this.getData()
            },
            ...mapActions('admin/page', ['setPatientDetail']),
            // 清除
            OnClear (row) {
                row.show = !row.show
            },
            // 确认日期
            confirm (row) {
                if (row.next_revisiting_time_str === '') {
                    row.next_revisiting_time_str = dayjs(new Date()).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: row.next_revisiting_time_str
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.show = !row.show
                    })
                } else {
                    this.next_revisiting_time_strs = dayjs(this.next_revisiting_time_strs).format('YYYY-MM-DD')
                    const config = {
                        id: row.id,
                        next_revisiting_time: this.next_revisiting_time_strs
                    }
                    updateNextRevisitingTime(config).then(res => {
                        row.next_revisiting_time_str = this.next_revisiting_time_strs
                        row.show = !row.show
                    })
                }
            },
            // 单机事件
            aaa () {
                this.row.next_revisiting_time_strs = dayjs(this.row.next_revisiting_time_strs).format('YYYY-MM-DD')
                this.row.show = false
            },
            // 双击事件
            DatePicker (e) {
                this.next_revisiting_time_strs = e.next_revisiting_time_str
                this.row = e
                e.show = !e.show
            },
            // 获取数据
            getData () {
                this.loading = true
                let sendData = JSON.parse(JSON.stringify(this.realData))
                if (sendData.start_time[0] !== undefined && sendData.start_time[0] !== '') {
                    sendData.end_time = dayjs(sendData.start_time[1]).format('YYYY-MM-DD')
                    sendData.start_time = dayjs(sendData.start_time[0]).format('YYYY-MM-DD')
                } else {
                    sendData.start_time = ''
                    sendData.end_time = ''
                }
                const config = {
                    keywords: sendData.keywords,
                    belong_assistant_id: sendData.belong_assistant_id,
                    outpatient_type_id: sendData.outpatient_type_id,
                    effect_type_id: sendData.effect_type_id,
                    risk_type_id: sendData.risk_type_id,
                    page: sendData.page,
                    pageSize: sendData.pageSize,
                    clinic_id: this.realData.clinic_id,
                    sort_last_revisiting_type: this.realData.sort_last_revisiting_type,
                    sort_next_revisiting_type: this.realData.sort_next_revisiting_type,
                    sort_last_callback_type: this.realData.sort_last_callback_type,
                    sort_next_callback_type: this.realData.sort_next_callback_type,
                    sort_revisiting_type: this.realData.sort_revisiting_type,
                    sort_missed_type: this.realData.sort_missed_type,
                    sort_callback_type: this.realData.sort_callback_type,
                    sort_anti_type: this.realData.sort_anti_type
                }
                AntirelapseList(config).then(res => {
                    this.total = res.total
                    this.data = res.list
                    for (let i = 0; i < this.data.length; i++) {
                        this.$set(this.data[i], 'show', false)
                    }
                    this.typeList = res.condition.outpatient_type_list;
                    this.labelList = res.condition.tags_list;
                    this.clinic_list = res.condition.clinic_list
                    this.condition = res.condition
                    if (this.baseInfo === []) {
                        this.baseInfo = res.condition
                    }
                }).finally(() => {
                    this.loading = false
                })
            },
            getDatas(){
                for (let key in this.createData) {
                    this.realData[key] = this.createData[key]
                }
                this.getData()
            },
            // 获取当前点击对象,产生input输入框
            editInput (e, v) {
                const that = this
                this.removeDoc()
                if (this.docElement !== '') this.docElement.style.display = 'block'
                this.docElement = e.target
                let doc = document.createElement('input')
                doc.setAttribute('class', 'ivu-input ivu-input-default')
                doc.setAttribute('type', 'number')
                doc.setAttribute('value', (v.anti_relapse_year || ''))
                doc.addEventListener('input', (e) => {
                    // 获取输入框input事件
                    that.setAntiyears(e, v)
                })
                doc.addEventListener('blur', (e) => {
                    // 获取输入框blur事件
                    that.blurInput(doc)
                })
                this.docElement.style.display = 'none'
                this.docElement.parentNode.appendChild(doc)
                this.docList.push({ id: v.id, doc: doc })
                doc.focus()
            },
            // 删除多余创建的input表单元素
            removeDoc () {
                if (this.docList.length <= 0) return false
                for (let i = this.docList.length - 1; i >= 0; i--) {
                    try {
                        this.docList[i].doc.remove()
                        this.docList.splice(i, 1)
                    } catch (e) { }
                }
            },
            // 请求接口改变数据
            setAntiyears (e, v) {
                const config = {
                    id: v.id,
                    anti_relapse_year: e.target.value
                }
                setAntiyear(config).then(res => {
                    v.anti_relapse_year = e.target.value
                })
            },
            // 输入框失去焦点删除input
            blurInput (doc) {
                try {
                    doc.remove()
                } catch (err) { }
                this.docElement.style.display = 'block'
            },
            // 切换分页
            handleChangePage (e) {
                this.realData.page = e
                for (let key in this.createData) {
                    this.createData[key] = this.realData[key]
                }
                this.getData()
            },
            handleDetailPatient (row) {
                this.patientId = row.id
                this.showTetailDrawer = true
                // this.$store.commit('admin/page/setPatientDetail', { patientId: row.id, edit_type: 2 })
                // this.$router.push('/patient/detail')
            },
            // 排序
            handleChangeSort (column) {
                this.realData.sort_last_revisiting_type = 0
                this.realData.sort_next_revisiting_type = 0
                this.realData.sort_last_callback_type = 0
                this.realData.sort_next_callback_type = 0
                this.realData.sort_revisiting_type = 0
                this.realData.sort_missed_type = 0
                this.realData.sort_callback_type = 0
                this.realData.sort_anti_type = 0
                switch (column.key) {
                case 'anti_relapse_year':
                    column.order === 'asc' ? this.realData.sort_anti_type = 1 : column.order === 'normal' ? this.realData.sort_anti_type = 0 : this.realData.sort_anti_type = 2
                    break;
                case 'last_revisiting_time_str':
                    column.order === 'asc' ? this.realData.sort_last_revisiting_type = 1 : column.order === 'normal' ? this.realData.sort_last_revisiting_type = 0 : this.realData.sort_last_revisiting_type = 2
                    break;
                case 'next_revisiting_time_str':
                    column.order === 'asc' ? this.realData.sort_next_revisiting_type = 1 : column.order === 'normal' ? this.realData.sort_next_revisiting_type = 0 : this.realData.sort_next_revisiting_type = 2
                    break;
                case 'last_callback_time_str':
                    column.order === 'asc' ? this.realData.sort_last_callback_type = 1 : column.order === 'normal' ? this.realData.sort_last_callback_type = 0 : this.realData.sort_last_callback_type = 2
                    break;
                case 'next_callback_time_str':
                    column.order === 'asc' ? this.realData.sort_next_callback_type = 1 : column.order === 'normal' ? this.realData.sort_next_callback_type = 0 : this.realData.sort_next_callback_type = 2
                    break;
                case 'revisiting_count':
                    column.order === 'asc' ? this.realData.sort_revisiting_type = 1 : column.order === 'normal' ? this.realData.sort_revisiting_type = 0 : this.realData.sort_revisiting_type = 2
                    break;
                case 'missed_days':
                    column.order === 'asc' ? this.realData.sort_missed_type = 1 : column.order === 'normal' ? this.realData.sort_missed_type = 0 : this.realData.sort_missed_type = 2
                    break;
                case 'callback_count':
                    column.order === 'asc' ? this.realData.sort_callback_type = 1 : column.order === 'normal' ? this.realData.sort_callback_type = 0 : this.realData.sort_callback_type = 2
                    break;
                }
                for (let key in this.createData) {
                    this.createData[key] = this.realData[key]
                }
                this.getData()
            },
            // 编辑
            handleOpenDrawer (id) {
                this.$refs.editPatient.handleOpenDrawer(id, 2)
            },
            // 回访
            handleOpenSubmit (row) {
                this.$refs.editModel.handleShow(row, this.typeList, this.labelList, 2)
            },
            // 切换分页条数
            handleChangePageSize (e) {
                this.realData.pageSize = e
                for (let key in this.createData) {
                    this.createData[key] = this.realData[key]
                }
                this.getData()
            },
            // 提交
            // handleSubmit (type) {
            //     if (type === 1) {
            //         this.$refs.form.resetFields()
            //     }
            //     this.createData.page = 1
            //     this.createData.pageSize = 10
            //     for (let key in this.createData) {
            //         this.realData[key] = this.createData[key]
            //     }
            //     this.getData()
            // },
            handleSubmits (type) {
                if (type === 1) {
                    this.$refs.form.resetFields()
                }
                this.createData.page = 1
                this.createData.pageSize = 10
                for (let key in this.createData) {
                    this.realData[key] = this.createData[key]
                }
                this.createData={
                    start_time: [],
                    end_time: '',
                    clinic_id:'',
                    keywords: this.realData.keywords,
                    belong_assistant_id: '',
                    outpatient_type_id: '',
                    effect_type_id: '',
                    risk_type_id: '',
                    clinic_assess_id: '',
                    body_parts_ids: [],
                    tags_ids: [],
                    sort_last_revisiting_type: 0,
                    sort_next_revisiting_type: 0,
                    sort_last_callback_type: 0,
                    sort_next_callback_type: 0,
                    sort_revisiting_type: 0,
                    sort_callback_type: 0,
                    sort_missed_type: 0,
                    page: 1,
                    pageSize: 10
                }
                this.getData()
            },
            closeEdit (val) {
                if (val) {
                    this.getData();
                }
            }
        }
    }
</script>
